refactor: Update `Message` component structure and imports for consistency #38237

tassoevan · 2026-01-17T20:20:16Z

Proposed changes (including videos or screenshots)

It uses named subcomponents for Message from @rocket.chat/fuselage.

This pull request focuses on updating the usage of message-related components throughout the codebase to use the new, individual @rocket.chat/fuselage message subcomponents directly, rather than accessing them as properties of the main Message component. This change improves clarity, consistency, and maintainability by making component usage more explicit and aligning with the latest best practices for the Fuselage UI library.

The most important changes include:

Refactoring to Use Direct Message Subcomponents:

Replaced all usages of Message.[Subcomponent] (such as Message.LeftContainer, Message.Container, etc.) with direct imports and usage of the corresponding subcomponents (e.g., MessageLeftContainer, MessageContainer, etc.) in the following files:
- apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx [1] [2] [3]
- apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx [1] [2]
- apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx [1] [2]
- apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx [1] [2] [3]
- apps/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
- packages/fuselage-ui-kit/src/stories/Message.stories.tsx [1] [2] [3] [4]

Component Naming Consistency and Clarity:

Updated code to use the new naming convention for message subcomponents, such as MessageLeftContainer, MessageContainer, MessageHeader, MessageName, MessageTimestamp, MessageBody, MessageToolbarWrapper, MessageToolbar, and MessageToolbarItem for better readability and maintainability. [1] [2] [3] [4] [5] [6]

Special Case for Highlight Component:

Updated the ChannelMentionElement to use the new MessageHighlight component directly instead of Message.Highlight. [1] [2]

These changes ensure that the codebase is up-to-date with the latest Fuselage API and improve overall code clarity.

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Refactor
- Updated internal component architecture and structure to improve code organization and maintainability across multiple application modules.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…tency

dionisio-bot · 2026-01-17T20:20:19Z

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

changeset-bot · 2026-01-17T20:20:21Z

⚠️ No Changeset found

Latest commit: 372a676

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-01-17T20:20:42Z

Walkthrough

This PR updates component usage across 8 files to leverage new granular Message subcomponent exports from @rocket.chat/fuselage, replacing nested property access (e.g., Message.Divider, Message.Container) with distinct named components (e.g., MessageDivider, MessageContainer) throughout the codebase.

Changes

Cohort / File(s)	Summary
Admin & Moderation Views `apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx`	Replaced Message.* nested properties with distinct components: MessageDivider, MessageLeftContainer, MessageContainer, MessageHeader, MessageTimestamp, MessageRole, MessageBody, and MessageToolbar. Adjusted JSX structure and nesting accordingly.
Room Context Features `apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx`, `apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx`, `apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx`	Refactored to use explicit message subcomponents (MessageLeftContainer, MessageContainer, MessageHeader, MessageName, MessageTimestamp, MessageBody, etc.) replacing legacy Message.* wrappers. Updated JSX hierarchy while preserving conditional rendering and layout behavior.
Gazzodown Mention Elements `packages/gazzodown/src/mentions/ChannelMentionElement.tsx`, `packages/gazzodown/src/mentions/UserMentionElement.tsx`	Replaced Message.Highlight usage with MessageHighlight component in mention rendering logic. Updated imports and JSX tags; no behavioral changes.
Stories & Documentation `packages/fuselage-ui-kit/src/stories/Message.stories.tsx`, `packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx`, `apps/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx`	Updated story compositions to use granular message subcomponents instead of Message.* nested properties. Expanded import declarations to include individual components; content and structure preserved.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

chore: bump fuselage package #37699 — Introduced the new granular Message subcomponent exports in @rocket.chat/fuselage that this PR adapts to.
chore: Use AvatarStack instead of Avatar.Stack #37226 — Also updates VideoConfListItem.tsx with Fuselage component changes (Avatar.Stack to AvatarStack).

Suggested labels

stat: ready to merge, stat: QA assured

Suggested reviewers

ggazzo
gabriellsh

Poem

🐰 Components hop and reorganize,
No longer nested, they modularize!
From Message.Divider to MessageDivider bright,
Each subcomponent finds its own light.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objective of the PR: refactoring the codebase to use named Fuselage message subcomponents instead of nested Message properties.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch refactor/message-component-namespace

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

cubic-dev-ai

No issues found across 9 files

codecov · 2026-01-17T20:29:40Z

Codecov Report

❌ Patch coverage is 81.81818% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.67%. Comparing base (f12402e) to head (372a676).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #38237   +/-   ##
========================================
  Coverage    70.67%   70.67%           
========================================
  Files         3136     3136           
  Lines       108592   108592           
  Branches     19552    19603   +51     
========================================
  Hits         76750    76750           
+ Misses       29838    29833    -5     
- Partials      2004     2009    +5

Flag	Coverage Δ
e2e	`60.27% <ø> (-0.05%)`	⬇️
e2e-api	`47.97% <ø> (-0.13%)`	⬇️
unit	`71.77% <81.81%> (+0.04%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2026-01-17T20:34:27Z

📦 Docker Image Size Report

➡️ Changes

Service	Current	Baseline	Change
sum of all images	0B	0B	0B
account-service	0B	0B	0B
authorization-service	0B	0B	0B
ddp-streamer-service	0B	0B	0B
omnichannel-transcript-service	0B	0B	0B
presence-service	0B	0B	0B
queue-worker-service	0B	0B	0B
rocketchat	0B	0B	0B

📊 Historical Trend

---
config:
  theme: "dark"
  xyChart:
    width: 900
    height: 400
---
xychart
  title "Image Size Evolution by Service (Last 30 Days + This PR)"
  x-axis ["11/18 22:53", "11/19 23:02", "11/21 16:49", "11/24 17:34", "11/27 22:32", "11/28 19:05", "12/01 23:01", "12/02 21:57", "12/03 21:00", "12/04 18:17", "12/05 21:56", "12/08 20:15", "12/09 22:17", "12/10 23:26", "12/11 21:56", "12/12 22:45", "12/13 01:34", "12/15 22:31", "12/16 22:18", "12/17 21:04", "12/18 23:12", "12/19 23:27", "12/20 21:03", "12/22 18:54", "12/23 16:16", "12/24 19:38", "12/25 17:51", "12/26 13:18", "12/29 19:01", "12/30 20:52", "01/19 15:03 (PR)"]
  y-axis "Size (GB)" 0 --> 0.5
  line "account-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.00]
  line "authorization-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.00]
  line "ddp-streamer-service" [0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.00]
  line "omnichannel-transcript-service" [0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.00]
  line "presence-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.00]
  line "queue-worker-service" [0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.00]
  line "rocketchat" [0.35, 0.35, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.00]

Statistics (last 30 days):

📊 Average: 1.5GiB
⬇️ Minimum: 1.4GiB
⬆️ Maximum: 1.6GiB
🎯 Current PR: 0B

ℹ️ About this report

This report compares Docker image sizes from this build against the develop baseline.

Tag: pr-38237
Baseline: develop
Timestamp: 2026-01-19 15:03:21 UTC
Historical data points: 30

Updated: Mon, 19 Jan 2026 15:03:22 GMT

refactor: Update Message component structure and imports for consis…

6d45df4

…tency

tassoevan added this to the 8.1.0 milestone Jan 17, 2026

tassoevan requested a review from a team as a code owner January 17, 2026 20:20

cubic-dev-ai bot reviewed Jan 17, 2026

View reviewed changes

dougfabris approved these changes Jan 19, 2026

View reviewed changes

dougfabris added the stat: QA assured Means it has been tested and approved by a company insider label Jan 19, 2026

dionisio-bot bot added the stat: ready to merge PR tested and approved waiting for merge label Jan 19, 2026

Merge branch 'develop' into refactor/message-component-namespace

372a676

kodiakhq bot merged commit 13fa8d1 into develop Jan 19, 2026
44 checks passed

kodiakhq bot deleted the refactor/message-component-namespace branch January 19, 2026 16:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Update `Message` component structure and imports for consistency #38237

refactor: Update `Message` component structure and imports for consistency #38237

Uh oh!

tassoevan commented Jan 17, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

dionisio-bot bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

codecov bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

refactor: Update Message component structure and imports for consistency #38237

refactor: Update Message component structure and imports for consistency #38237

Uh oh!

Conversation

tassoevan commented Jan 17, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Uh oh!

dionisio-bot bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Docker Image Size Report

➡️ Changes

📊 Historical Trend

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

refactor: Update `Message` component structure and imports for consistency #38237

refactor: Update `Message` component structure and imports for consistency #38237

tassoevan commented Jan 17, 2026 •

edited by coderabbitai bot

Loading

dionisio-bot bot commented Jan 17, 2026 •

edited

Loading

changeset-bot bot commented Jan 17, 2026 •

edited

Loading

coderabbitai bot commented Jan 17, 2026 •

edited

Loading

codecov bot commented Jan 17, 2026 •

edited

Loading

github-actions bot commented Jan 17, 2026 •

edited

Loading